<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/vue.js"></script>
  <style>
    .static{
      width:120px;
      height:120px;
      margin:20px;
      text-align: center;
      line-height: 120px;
      font-size: 50px;
    }
    .a{
      background: crimson;
    }
    .b{
      border-radius: 50%;
    }
    .c{
      border:4px solid darkviolet;
      box-shadow:  0px 0px 2px 2px yellow;
    }
    .nav{
      display: flex;
    }
    .nav-item{
      width:100px;
      height:40px;
      line-height: 40px;
      text-align: center;
      background: deepskyblue;
      border-radius: 8px;
      color:#fff;
      font-size: 14px;
      margin:0 10px;
      cursor: pointer;
    }
    .nav-active{
      background: brown;
      color:deepskyblue;
    }
    .main{
      width:360px;
      padding:0 10px;
      margin-top:20px;
      box-sizing: border-box;
    }
    .content{
      width:100%;
      height:340px;
      background: brown;
      border-radius: 10px;
      text-align: center;
      line-height: 340px;
      font-size: 40px;
      color:#fff;
    }
    td{
      border:1px solid #999;

    }
    .img{
      display: block;
      width:150px;
      height:150px;
      margin: 20px auto;
      border-radius: 50%;
    }
    @keyframes move{
      from{
        opacity: 1;
        transform: translateX(-400px);
      }
      to{
        opacity: 0;
        transform: translateX(400px);
      }
    }
    .move{
      animation:move 3.2s 0s 1 both ;
    }

    .v-enter-to , .v-leave{
      opacity:1 ;
      transform: translateX(0);
    }
    .v-enter,.v-leave-to{
      opacity:0 ;
      transform: translateX(500px);
    }

    .box{
      transition: all 2s;
    } 
    @keyframes rotateOut{
      0%{
        transform: rotateY(0deg) scale(1);
        opacity: 1;
      }
      100%{
        transform: rotateY(180deg) scale(0);
        opacity: 0;
      }
    }
    @keyframes rotateIn{
      0%{
        transform: rotateY(180deg) scale(0);
        opacity: 0;
      }
      100%{
        transform: rotateY(0deg) scale(1);
        opacity: 1;
      }
    }
    .fade-enter-active{
        animation: rotateIn 1.8s 0s  ;
    }
    .fade-leave-active{
      animation: rotateOut 1.8s ;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{title }}</h2>
    <div>
      <img  src="http://47.104.209.44/base/imgs/1.jpg" class="img move" alt="">
    </div>

    <div>
      <transition name="v" >
        <img v-show="show" src="http://47.104.209.44/base/imgs/2.jpg" class="img box" alt="">
      </transition>
      <button @click="show=!show" >点击切换</button>
    </div>

    <div>
      <transition name="fade" >
        <img v-show="show1" src="http://47.104.209.44/base/imgs/3.jpg" class="img" alt="">
      </transition>
      <button @click="show1=!show1" >点击切换</button>
    </div>
  </div>
  
  <script>

    const vm = new Vue({

      data:{
        title:"Vue 过渡 transition   " ,
        imgSrc:'http://47.104.209.44/base/imgs/1.jpg',
        show:true,
        show1:true
      },
      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title; 
        
      }
    }).$mount("#app")


  </script>
  <!-- 
  route  页面切换    进入和离开的动画  

Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
v-if
v-show
组件切换  (动态组件切换  子组件切换)


过渡  (0-1)  
在进入/离开的过渡中，会有 6 个 class 切换
v-enter  进入之前    开始帧 过渡
v-enter-active 正在进入   animation
v-enter-to  进入完成   结束帧

v-leave  离开之前
v-leave-active  正在离开
v-leave-to   离开完成

v-   transition 没有name 默认 v-
transition 添加 name = fade  v 替换成 fade 

初始化渲染 过渡 
appear
appear-active-class  动画 

v-if / v-show 
 -->
</body>
</html>